import React, { memo, useState, useEffect } from 'react';
import { useSelector, shallowEqual, useDispatch } from 'react-redux';
import classNames from 'classnames';

import { singerAlphas } from '@/utils/handle-data';
import { getArtistListAction } from '../../../../store/actionCreators';

import { AlphaListWrapper } from './style';

export default memo(function GHAlphaList() {
  const [currentAlpha, setcurrentAlpha] = useState({
    value: '-1',
    name: '热门'
  })
  const { currentType, currentArea } = useSelector(state => {
    return {
      currentType: state.getIn(['artist', 'currentType']),
      currentArea: state.getIn(['artist', 'currentArea'])
    }
  }, shallowEqual)

  function hanldeChangeCurrent(item, index) {
    setcurrentAlpha(item)
  }

  const dispatch = useDispatch()
  useEffect(() => {
    setcurrentAlpha({
      value: '-1',
      name: '热门'
    })
  }, [currentType, currentArea])

  useEffect(() => {
    dispatch(getArtistListAction(currentArea, currentType.type, currentAlpha.value))
  }, [currentAlpha, currentType, currentArea, dispatch])

  return (
    <AlphaListWrapper hasTop={currentArea !== -1}>
      {
        currentArea !== -1 && singerAlphas.map((item, index, arr) => {
          const isActive = currentAlpha.name === item.name
          if (item.value === '-1') item.name = "热门"
          if (item.value === '0') item.name = '其他'
          return (
            <div key={item.value} className={classNames("item", { "active": isActive })}>
              <span onClick={_ => hanldeChangeCurrent(item, index)}>{item.name}</span>
            </div>
          )
        })
      }
    </AlphaListWrapper>
  )
})